<template>
  <div id="zyview-container" class="img-container" style="padding-top: 30px">
    <vue-element-loading
      :active="this.$store.state.elementloading.vueElementLoading"
      spinner="spinner"
      color="#FF6700"
    />
    <!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> -->
    <div style="margin-bottom: 20px" flex-box="0" flex="dir:top main:center cross:center">
      <img class="search-icon" src="https://image.zysuyuan.cn:8031/zylogo.png" alt />
      <div class="ui huge icon input">
        <input style="width: 400px" type="text" v-model="medicinal" placeholder="搜索药材..." />
        <i @click="searchMedicinal" class="search link icon"></i>
      </div>
      <!-- <sui-input size="huge" placeholder="搜索药材..." @click="searchMedicinal">
        <i @click="searchMedicinal" class="search link icon"></i>
      </sui-input>
      <sui-search input class="huge" placeholder="搜索药材..." v-model="medicinal">
        <i slot="icon" @click="searchMedicinal" class="search link icon"></i>
      </sui-search>-->
    </div>
    <el-card shadow="never">
      <!-- <img src="image/medicine/沉香.jpg" alt /> -->
      <el-row :gutter="20" style="text-align: center">
        <!-- :class="[sidebar.opened ?  'block' : 'block-lg']" -->
        <el-col
          :xs="{span: 24}"
          :sm="{span: 12}"
          :md="{span: 12}"
          :lg="{span: 4}"
          :xl="{span: 4}"
          v-for="(list,index) in lists"
          :key="index"
          style="margin-bottom:20px;"
        >
          <!-- :class="[sidebar.opened ? 'box-card' : 'box-card-lg']" -->
          <el-card shadow="always" class="box-card-component">
            <div slot="header" class="box-card-header">
              <img @click="gotodescribe($event,index)" :src="`${BASE_URL}/${list.imgPath}`" />
            </div>
            <!-- <el-image
                @click="gotodescribe($event,index)"
                :class="[sidebar.opened ? 'image' : 'image-lg']"
                :src="`${BASE_URL}/${list.imgPath}`"
                :fit="fit"
            ></el-image>-->
            <div>
              <span style="font-weight: bold">{{list.mName}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        style="margin-top: 10px"
        flex=" main:center cross:center "
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>


<style scoped src="semantic-ui-css/semantic.min.css"></style>
<script src="./zyview.js"></script>
<style src="./zyview.css" scoped></style>


<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
}
.img-container {
  padding: 15px;
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    width: 100%;
    position: relative;
    height: 0px;
    padding-top: 85%; //padding-bottom都可以
    // height: 250px;
    // max-height: 200px;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
}

.search-icon {
  width: 250px;
  // height: 80px;
  margin-bottom: 20px;
}

@media (max-width: 1460px) {
  .box-card-header {
    position: relative;
    height: 320px;
  }
}
</style>